<script setup lang="ts">
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useAuth } from '@/composables/useAuth'
import ThemeSwitcher from '@/components/ThemeSwitcher.vue'
import SearchInput from '@/components/SearchInput.vue'
import UserAvatar from '@/components/common/UserAvatar/index.vue'
import {
  PhNewspaper,
  PhHouse,
  PhArticle,
  PhUser,
  PhMagnifyingGlass,
  PhList,
  PhCode,
} from '@phosphor-icons/vue'

// 主题系统
const {} = useTheme()

// 用户认证
const { currentUser, quickLogin, logout } = useAuth()

// 搜索功能
const showSearchBox = ref(false)
const searchQuery = ref('')

/**
 * 切换搜索框显示状态
 */
const toggleSearchBox = (): void => {
  showSearchBox.value = !showSearchBox.value
  if (!showSearchBox.value) {
    searchQuery.value = ''
  }
}

/**
 * 关闭搜索框
 */
const closeSearchBox = (): void => {
  showSearchBox.value = false
  searchQuery.value = ''
}

/**
 * 执行搜索
 */
const handleSearch = (): void => {
  if (searchQuery.value.trim()) {
    // TODO: 实现搜索逻辑
    console.log('搜索:', searchQuery.value)
    closeSearchBox()
  }
}

/**
 * 处理用户登录
 */
const handleLogin = async (): Promise<void> => {
  try {
    await quickLogin()
  } catch (error) {
    console.error('登录失败:', error)
  }
}

/**
 * 处理用户登出
 */
const handleLogout = async (): Promise<void> => {
  try {
    await logout()
  } catch (error) {
    console.error('登出失败:', error)
  }
}

/**
 * 处理个人资料
 */
const handleProfile = (): void => {
  // TODO: 跳转到个人资料页面
  console.log('跳转到个人资料页面')
}

/**
 * 处理设置
 */
const handleSettings = (): void => {
  // TODO: 跳转到设置页面
  console.log('跳转到设置页面')
}
</script>

<template>
  <div>
    <!-- Navigation -->
    <nav
      class="navbar bg-base-100/95 backdrop-blur-xl border-b border-base-300/50 fixed top-0 z-40 transition-all duration-300 shadow-sm"
    >
      <div class="navbar-start">
        <router-link
          to="/"
          class="btn btn-ghost text-xl font-bold hover:scale-105 transform transition-all duration-200 group"
        >
          <div
            class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center text-primary-content text-lg mr-3 shadow-lg group-hover:shadow-xl transition-all duration-200"
          >
            <PhNewspaper :size="20" />
          </div>
          <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
            我的博客
          </span>
        </router-link>
      </div>

      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1 gap-1">
          <li>
            <router-link
              to="/"
              class="btn btn-ghost hover:btn-primary transition-all duration-200 gap-2"
              active-class="btn-primary"
            >
              <PhHouse :size="16" />
              首页
            </router-link>
          </li>
          <li>
            <router-link
              to="/blog"
              class="btn btn-ghost hover:btn-primary transition-all duration-200 gap-2"
              active-class="btn-primary"
            >
              <PhArticle :size="16" />
              博客
            </router-link>
          </li>
          <li>
            <router-link
              to="/about"
              class="btn btn-ghost hover:btn-primary transition-all duration-200 gap-2"
              active-class="btn-primary"
            >
              <PhUser :size="16" />
              关于
            </router-link>
          </li>
          <li>
            <router-link
              to="/demo"
              class="btn btn-ghost hover:btn-primary transition-all duration-200 gap-2"
              active-class="btn-primary"
            >
              <PhCode :size="16" />
              组件演示
            </router-link>
          </li>
        </ul>
      </div>

      <div class="navbar-end gap-3">
        <!-- 搜索按钮 -->
        <button
          @click="toggleSearchBox"
          class="btn btn-ghost btn-circle hover:btn-primary hover:scale-110 transform transition-all duration-200 tooltip tooltip-bottom"
          :class="{ 'btn-primary scale-110': showSearchBox }"
          data-tip="搜索文章"
        >
          <PhMagnifyingGlass :size="20" />
        </button>

        <!-- 主题切换器 -->
        <div class="tooltip tooltip-bottom" data-tip="切换主题">
          <ThemeSwitcher />
        </div>

        <!-- 用户头像/登录按钮 -->
        <UserAvatar
          :user="currentUser"
          @login="handleLogin"
          @logout="handleLogout"
          @profile="handleProfile"
          @settings="handleSettings"
        />

        <!-- 移动端菜单 -->
        <div class="dropdown dropdown-end lg:hidden">
          <div
            tabindex="0"
            role="button"
            class="btn btn-ghost btn-circle hover:btn-primary transition-all duration-200"
          >
            <PhList :size="20" />
          </div>
          <ul
            tabindex="0"
            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-xl bg-base-100 rounded-2xl w-56 border border-base-300/50"
          >
            <li>
              <router-link to="/" active-class="active" class="gap-3">
                <PhHouse :size="16" />
                首页
              </router-link>
            </li>
            <li>
              <router-link to="/blog" active-class="active" class="gap-3">
                <PhArticle :size="16" />
                博客
              </router-link>
            </li>
            <li>
              <router-link to="/about" active-class="active" class="gap-3">
                <PhUser :size="16" />
                关于
              </router-link>
            </li>
            <li>
              <router-link to="/demo" active-class="active" class="gap-3">
                <PhCode :size="16" />
                组件演示
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 搜索模态框 -->
    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="showSearchBox"
        class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-20"
        @click="closeSearchBox"
      >
        <Transition
          enter-active-class="transition-all duration-300 ease-out"
          enter-from-class="transform -translate-y-8 opacity-0 scale-95"
          enter-to-class="transform translate-y-0 opacity-100 scale-100"
          leave-active-class="transition-all duration-200 ease-in"
          leave-from-class="transform translate-y-0 opacity-100 scale-100"
          leave-to-class="transform -translate-y-8 opacity-0 scale-95"
        >
          <div
            v-if="showSearchBox"
            @click.stop
            class="w-full max-w-2xl mx-4 bg-base-100 rounded-3xl shadow-2xl border border-base-300/50 overflow-hidden"
          >
            <!-- 搜索头部 -->
            <div class="p-6 pb-4">
              <div class="flex items-center gap-3 mb-4">
                <span class="text-2xl">🔍</span>
                <h2 class="text-xl font-semibold text-base-content">搜索文章</h2>
              </div>

              <!-- 搜索输入框 -->
              <SearchInput
                v-model="searchQuery"
                placeholder="搜索文章标题、内容、作者..."
                :autofocus="true"
                @search="handleSearch"
                @close="closeSearchBox"
              />
            </div>

            <!-- 搜索提示 -->
            <div class="px-6 pb-6">
              <div class="bg-base-200/50 rounded-2xl p-4">
                <p class="text-sm text-base-content/70 text-center mb-3">
                  输入关键词搜索文章，支持标题、内容和作者搜索
                </p>
                <div class="flex justify-center gap-3">
                  <div class="flex items-center gap-2 text-xs text-base-content/60">
                    <kbd class="kbd kbd-sm">Enter</kbd>
                    <span>搜索</span>
                  </div>
                  <div class="flex items-center gap-2 text-xs text-base-content/60">
                    <kbd class="kbd kbd-sm">Esc</kbd>
                    <span>关闭</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
/* 导航栏样式增强 */
.navbar {
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.navbar-start .btn-ghost:hover {
  background: hsl(var(--p) / 0.1);
}

/* 导航栏Logo动画 */
.navbar-start .group:hover .w-10 {
  transform: rotate(5deg) scale(1.1);
}

/* 导航链接悬停效果 */
.navbar-center .btn-ghost {
  position: relative;
  overflow: hidden;
}

.navbar-center .btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsl(var(--p) / 0.1), transparent);
  transition: left 0.5s ease;
}

.navbar-center .btn-ghost:hover::before {
  left: 100%;
}

/* 搜索按钮脉冲动画 */
.btn-circle.btn-primary {
  animation: pulse-primary 2s infinite;
}

@keyframes pulse-primary {
  0%,
  100% {
    box-shadow: 0 0 0 0 hsl(var(--p) / 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px hsl(var(--p) / 0);
  }
}

/* 工具提示样式增强 */
.tooltip:before {
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border: 1px solid hsl(var(--b3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tooltip:after {
  border-top-color: hsl(var(--b1));
}

/* 下拉菜单动画 */
.dropdown-content {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 移动端菜单项悬停效果 */
.dropdown-content li a {
  transition: all 0.2s ease;
  border-radius: 0.75rem;
}

.dropdown-content li a:hover {
  background: hsl(var(--p) / 0.1);
  color: hsl(var(--p));
  transform: translateX(4px);
}

/* 渐变文字效果 */
.bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 1rem;
  }
}
</style>
